<template>
  <div class="announcement-content">
    <h3 class="announcement-title">{{ title }}</h3>
    <p class="announcement-text">{{ truncatedContent }}</p>
  </div>
  <div class="announcement-footer">
    <el-button type="primary" @click="goToDetails">公告详情</el-button>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from "vue-router";
import { computed } from "vue";

interface Props {
  id: number;
  title: string;
  content: string;
  createTime: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: 0,
  title: "默认标题",
  content: "默认内容",
  createTime: "",
});

const router = useRouter();

// 计算截断后的内容
const truncatedContent = computed(() => {
  const maxLength = 100; // 可以根据实际需求调整
  return props.content.length > maxLength
    ? props.content.slice(0, maxLength) + "......"
    : props.content;
});

// 跳转到公告详情页
const goToDetails = () => {
  // 这里预留路径跳转的代码
  router.push(`/system-announcement/${props.id}`);
};
</script>

<style scoped>
.announcement-content {
  flex: 0.8;
  padding: 15px;
  overflow: hidden;
}

.announcement-title {
  margin-bottom: 10px;
  font-size: 1.2em;
  font-weight: bold;
}

.announcement-text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.announcement-footer {
  flex: 0.2;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 10px 10px;
}
</style>
